<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <el-table
          :header-cell-style="centerStyle"
          :cell-style="centerStyle"
          :data="userList"
          stripe
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="avatarurl"
            label="头像">
            <template slot-scope="scope">
              <img :src="scope.row.avatarurl" width="50px" class="avatarurl"  />
            </template>
          </el-table-column>
          <el-table-column
            prop="nickname"
            label="昵称">
          </el-table-column>
          <el-table-column
            prop="openid"
            label="openid">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="deleteUser(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[1, 3, 5, 10]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      queryInfo: {
        searchwords: '',
        pagesize: 10,
        pagenum: 1
      },
      userList: [],
      total: 0
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    // 获取用户列表
    async getUserList () {
      const res = await this.$http.get('user/getAllUserByPage', {
        params: {
          pageNum: this.queryInfo.pagenum,
          pageSize: this.queryInfo.pagesize
        }
      })
      if (res.status !== 200) {
        this.$message.error('获取用户列表失败')
      } else {
        this.userList = res.data.list
        this.total = res.data.total
      }
    },
    // 表格内容居中样式
    centerStyle () {
      return 'text-align: center'
    },
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getUserList()
    },
    // 删除用户
    deleteUser (id) {
      const name = window.sessionStorage.getItem('name')
      if (name !== null) {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await this.$http.post('user/deleteUserById?id=' + id)
          if (res.data === 'success') {
            this.$message.success('删除成功')
            this.getUserList()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$confirm('您还没有登录，请先登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/login')
        }).catch(() => {
          return false
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.avatarurl {
  border-radius: 50%;
}
</style>
